import { Navbar } from '@chatui/core';
import './app.css';
import { TabBar } from 'antd-mobile';
import {
  AppOutline,
  UnorderedListOutline,
  UserOutline
} from 'antd-mobile-icons';
import { Outlet, useLocation, useNavigate } from 'react-router';

function App() {
  const navigate = useNavigate();
  const location = useLocation();
  const { pathname } = location;

  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />
    },
    {
      key: 'message',
      title: '待办',
      icon: <UnorderedListOutline />
    },
    {
      key: 'me',
      title: '我的',
      icon: <UserOutline />
    }
  ];

  const onBack = () => {
    navigate(-1);
  };

  return (
    <div className="layout">
      <Navbar
        title="AI语音学习助手"
        leftContent={{ icon: 'chevron-left', onClick: () => onBack() }}
      />
      <div className="main-container">
        <Outlet />
      </div>
      <TabBar activeKey={pathname} onChange={(value) => navigate(value)}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default App;
